<div class="row">
  <div class="col-sm-6">
    <h2>新增订单</h2>
  </div>
  <div class="col-sm-6">
    <div class="header-button">
      <button type="button" class="btn btn-primary" (click)="onSubmit(order)">提交</button>
    </div>
  </div>
</div>
<hr>
<h3>订单基本信息</h3>
<div class="panel panel-default order-inf-input" style="padding: 10px;">
  <div class="row">
    <div class="col-sm-2">
      <label for="orderName">订单名</label>
      <input [(ngModel)]="order.orderName" type="text" class="form-control" id="orderName">
    </div>
    <div class="col-sm-2">
      <label for="createrDepartment">经销商</label>
      <input [(ngModel)]="order.createrDepartment" type="text" class="form-control" id="createrDepartment">
    </div>
    <div class="col-sm-2">
      <label for="createrName">接洽人</label>
      <input [(ngModel)]="order.createrName" type="text" class="form-control" id="createrName">
    </div>
    <div class="col-sm-2">
      <label for="deadline">交货期</label>
      <dp-date-picker name="deadline" id="deadline" [config]="config" [(ngModel)]="order.deadline"></dp-date-picker>
    </div>
    <div class="col-sm-2">
      <label for="squareAmount">总面积</label>
      <input [(ngModel)]="totalSquare" type="text" class="form-control" id="squareAmount" readonly>
    </div>
    <div class="col-sm-2">
      <label for="orderDeposit">已收定金</label>
      <input [(ngModel)]="order.orderDeposit" type="text" class="form-control" id="orderDeposit">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label for="customerName">客户名称</label>
      <select type="number" [(ngModel)]="order.customerId" class="form-control" id="customerName" (change)="changeCustomerInf()">
          <option *ngFor="let customer of customerList; index as i" [value]="customer.customerId">
            {{customer.customerName}}
          </option>
      </select>
    </div>
    <div class="col-sm-2">
      <label for="customerTel">电话</label>
      <input [(ngModel)]="order.customerTel" type="text" class="form-control" id="customerTel" readonly>
    </div>
    <div class="col-sm-4">
      <label for="customerAddress">安装地址</label>
      <input [(ngModel)]="order.customerAddress" type="text" class="form-control" id="customerAddress" readonly>
    </div>
    <div class="col-sm-2">
      <label for="orderAmount">总金额</label>
      <input [(ngModel)]="totalPrice" type="text" class="form-control" id="orderAmount" readonly>
    </div>
  </div>
</div>

<h3>订单详细信息</h3>
<div class="panel panel-default order-detail-add" style="padding: 10px">
  <div class="row">
    <form #partForm="ngForm" (submit)="addPart(part); partForm.reset();">
      <div class="col-sm-3">
        <label for="partName">定制内容</label>
        <input [(ngModel)]="part.partName" type="text" class="form-control" id="partName" name="partName" required #partName="ngModel">
        <div class="row">
          <div class="col-sm-4">
            <label for="partHeight">高mm</label>
            <input [(ngModel)]="part.partHeight" type="number" class="form-control" id="partHeight" name="partHeight" required #partHeight="ngModel">
          </div>
          <div class="col-sm-4">
            <label for="partWidth">宽mm</label>
            <input [(ngModel)]="part.partWidth" type="number" class="form-control" id="partWidth" name="partWidth" required #partWidth="ngModel">
          </div>
          <div class="col-sm-4">
            <label for="partExtend">延伸m/个</label>
            <input [(ngModel)]="part.partExtend" type="number" class="form-control" id="partExtend" name="partExtend" required #partExtend="ngModel">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <button type="button" (click)="doEditPart()" class="btn btn-lg btn-block btn-primary" *ngIf="updateIndex !== -1" [disabled]="!partForm.form.valid" style="margin-top: 10px">保存修改</button>
            <button type="submit" class="btn btn-lg btn-block btn-primary" *ngIf="updateIndex === -1" [disabled]="!partForm.form.valid" style="margin-top: 10px">提交项目</button>
          </div>
        </div>
      </div>
      <div class="col-sm-2">
        <label for="partColor">颜色</label>
        <input [(ngModel)]="part.partColor" type="text" class="form-control" id="partColor" name="partColor" required #partColor="ngModel">
        <label for="partPrice">单价</label>
        <input [(ngModel)]="part.partPrice" type="number" class="form-control" id="partPrice" name="partPrice" required #partPrice="ngModel">
        <label for="partDiscount">代理折扣</label>
        <input [(ngModel)]="part.partDiscount" type="number" class="form-control" id="partDiscount" name="partDiscount" required #partDiscount="ngModel">
      </div>
    </form>
    <div class="col-sm-5">
      <div class="col-sm-5">
        <form #extPartForm="ngForm" (ngSubmit)="addExtPart(extPart); extPartForm.reset();">
          <label for="extpartName">增配项目</label>
          <input [(ngModel)]="extPart.extpartName" type="text" class="form-control" id="extpartName" name="extpartName" required #extpartName="ngModel">
          <label for="extpartQuantity">数量</label>
          <input [(ngModel)]="extPart.extpartQuantity" type="number" class="form-control" id="extpartQuantity" name="extpartQuantity" required #extpartQuantity="ngModel">
          <label for="extpartAmount">单价</label>
          <input [(ngModel)]="extPart.extpartAmount" type="number" class="form-control" id="extpartAmount" name="extpartAmount" required #extpartAmount="ngModel">
          <button type="submit" class="btn btn-primary" style="margin-top: 5px" [disabled]="!extPartForm.form.valid">添加</button>
        </form>
      </div>
      <div class="col-sm-7">
        <table class="table table-bordered table-condensed" style="overflow: scroll;">
          <thead>
            <tr>
              <th>项目</th>
              <th>数量</th>
              <th>单价</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let extPart of extPartList; index as i;">
              <td>{{extPart.extpartName}}</td>
              <td>{{extPart.extpartQuantity}}</td>
              <td>{{extPart.extpartAmount}}</td>
              <td><button type="button" class="btn btn-sm btn-danger" (click)="deleteExtPart(i)">删除</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-2">
      <label for="partTotal">标配金额</label>
      <input [(ngModel)]="getPartTotalPriceExcExtPart" type="number" class="form-control" id="partTotal" name="partTotal" readonly>
      <label for="extPartTotal">增配金额</label>
      <input [(ngModel)]="extPartTotalPrice" type="number" class="form-control" id="extPartTotal" name="extPartTotal" readonly>
      <label for="partMinusDiscount">减差</label>
      <input [(ngModel)]="part.partMinusDiscount" type="number" class="form-control" id="partMinusDiscount" name="partMinusDiscount">
      <label for="total">小计</label>
      <input [(ngModel)]="getPartTotalPrice" type="text" class="form-control" id="total" name="total" readonly>
    </div>
  </div>
</div>
<h3>订单项目列表</h3>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>项目</th>
      <th>高mm</th>
      <th>宽mm</th>
      <th>延伸m/个</th>
      <th>颜色</th>
      <th>单价</th>
      <th>增配/备注</th>
      <th>代理折扣</th>
      <th>减差</th>
      <th>总面积</th>
      <th>小计金额</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody *ngFor="let part of partList; index as i;">
    <tr>
      <td>{{part.partName}}</td>
      <td>{{part.partHeight}}</td>
      <td>{{part.partWidth}}</td>
      <td>{{part.partExtend}}</td>
      <td>{{part.partColor}}</td>
      <td>{{part.partPrice}}</td>
      <td>{{extPartNameList}}</td>
      <td>{{part.partDiscount}}</td>
      <td>{{part.partMinusDiscount}}</td>
      <td>{{part.partTotalSquare}}</td>
      <td>{{part.partTotalPrice}}</td>
      <td><button type="button" class="btn btn-sm btn-warning" (click)="editPart(partList[i], i)" [disabled]="updateIndex !== -1">编辑</button>
        <button type="button" class="btn btn-sm btn-danger" (click)="deletePart(i)" [disabled]="updateIndex !== -1">删除</button></td>
    </tr>
  </tbody>
</table>

